<script setup>
import { ref, onMounted } from 'vue';
const currentTime = ref('00:00:00')

const updateTime = () => {
  const now = new Date()
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${hours}:${minutes}:${seconds}`
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})

</script>
<template>
  <div class="Home-page-mid">
    <!-- 左侧按钮 -->
    <div class="Home-page-mid-left">
      <el-card 
        class="image"
        shadow="hover"
        @click="$router.push('/GalleryView')"
      > 
      <div class="card-content">
        <span >图库</span> 
      </div>
    </el-card>
      <el-card 
        class="article"
        shadow="hover"
        @click="$router.push('/articleView')"
      > 
      <div class="card-content">
        <span>文章</span>
      </div>
    </el-card>
      <el-card 
        class="else"
        shadow="hover"
        @click="$router.push('/ToolsView')"
      > 
      <div class="card-content">
        <span>其他</span>
      </div>
    </el-card>
    </div>  
    <!-- 右侧时间 -->
    <div class="Home-page-mid-right">
        <el-card  class="time-display">
          <span>当前时间: {{ currentTime }}</span>
        </el-card>
        
    </div>
  </div>
</template>
<style scoped>
.Home-page-mid {
  margin: 0 20vw 20px 20vw;
  height: 10%;
  /* background-color: aqua; */
  display: flex;
  /* background-color: #fff; */

  .Home-page-mid-left {
    width: 50%;
    /* background-color: aquamarine; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;

    :deep(.el-card__body) {
      padding: 0;
      height: 100%;
    }

    .el-card {
      border: 0;

      &:hover {
        transform: translateY(-5px);
      }
    }

    .image {
      margin: 0 10px 0 0;
      background-color: rgb(96, 156, 254);
      cursor: pointer;
    }

    .article {
      margin: 0 10px 0 0;
      background-color: rgb(195, 126, 255);
      cursor: pointer;
    }

    .else {
      margin: 0 10px 0 0;
      background-color: rgb(255, 184, 69);
      cursor: pointer;
    }

    .card-content {
      height: 100%;
      padding: 0 0 0 20px;
      text-align: center;
      color: white;
      font-size: 1.3rem;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
  }

  .Home-page-mid-right {
    width: 50%;
    height: 100%;
    /* background-color: bisque; */

    .time-display {
      height: 100%;
      width: 100%;
      margin: 0;
      border: 0;
      background-color: rgb(083, 082, 085);
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        text-align: center;
        color: rgb(255, 255, 255);
        font-size: 1.8rem;
      }

      :deep(.el-card__body) {
        padding: 0;
        height: 100%;
      }

    }
  }
}
</style>